import React from 'react';
import ReactDOM from 'react-dom';

let hookStates = []; // 保存所有状态的数组
let hookIndex = 0; // 默认 从第一个开始保存状态

function useState(initialState) {
  return useReducer(null, initialState);
}

function useReducer(reducer, initialState) {
  hookStates[hookIndex] = hookStates[hookIndex] || initialState;
  let currentIndex = hookIndex;
  function dispatch(action) {
    // 这里只是基于了一个函数 来实现了状态初始化
    hookStates[currentIndex] = reducer
      ? reducer(hookStates[currentIndex], action)
      : action;
    render();
  }
  return [hookStates[hookIndex++], dispatch];
}

function useContext(context) {
  // 内部使用Provider的时候 会将提供的数据 挂在到ConuterContext 上
  return context._currentValue;
}
// Provider Consumer 提供数据的  消费数据的

const ConuterContext = React.createContext(); // 创建一个上下文组件

function ChildCounter() {
  let { number, setNumber } = useContext(ConuterContext);
  return (
    <div>
      {number} <button onClick={() => setNumber(number + 1)}>+</button>
    </div>
  );
}
function Counter() {
  let [number, setNumber] = useState(1);

  //  context._currentValue ={ number, setNumber }
  return (
    <ConuterContext.Provider value={{ number, setNumber }}>
      <ChildCounter />
    </ConuterContext.Provider>
  );
}

function render() {
  hookIndex = 0; // 保证每次渲染的时候 都是从0的开始 进行匹配获取状态
  ReactDOM.render(<Counter />, document.getElementById('root'));
}
render();

// 1) useState 我们将useState的状态 管理到数组里， 将索引和状态关联起来
// 2) 每次更新状态的时候 通过索引获取对应的状态，并进行更新
